<template>
	<div>
		<div class="threePic" v-if="dataList && dataList.length>0">
			<div class="ThreePicimg" v-for="(item, index) in arraydata" :key="'threePic' + index">
				<!--:style="`height: ${screenHeight}rem;width: ${screenWidth}rem;`"-->
				<img v-lazy="item.publicityPicture" :key="item.publicityPicture" @click='jumpEvent(item)' src="static/image/demo1.png" />
			</div>
			<div style="clear: both;"></div>
		</div>
		<div v-if="dataList.length==0 && env === 'edit'" style="height: 2.5rem;line-height: 2.5rem;">请配置数据</div>
	</div>
</template>

<script>
import handlePath from "../../utils/lxn/handlePath"
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
                arraydata: []
			}
		},
		methods: {
			threedata() {
				this.arraydata = []
				let length = this.dataList.length < 3 ? this.dataList.length : 3
				for(var i = 0; i < length; i++) {
					this.arraydata.push(this.dataList[i])
				}
			},
			jumpEvent(item) {
				if(item.extendField) {
					if(JSON.parse(item.extendField).urldata) {
						var urldata2 = JSON.parse(item.extendField).urldata
						this.$router.push({
							path: 'NewOtherPage?urlData=' + urldata2
						})
						localStorage.setItem("otherpagetitle", item.relSubtitle)
					} else if(JSON.parse(item.extendField).url) {
						// var urldata1 = JSON.parse(item.extendField).url.path
						let urldata1 = handlePath(item)
						if(urldata1) {
							this.$router.push({
								path:urldata1
								// name: "MiddleWare",
								// params: {
								// 	pageName: urldata1
								// }
							})
						}
					}

				}
			},
		},
		created() {

		},
		watch: {
			dataList() {
				this.threedata();
			}
		},
		computed: {
			env() {
				return window.environment; // 获取是否是编辑状态
			},
		},
		mounted() {
			this.threedata()
		}
	}
</script>

<style>
	.threePic {
		padding: 0.5rem 0.2rem;
		text-align: center;
		margin: 0rem auto;
	}
	
	.threePic .ThreePicimg {
		float: left;
		margin: 0rem 1%;
		width: 31.33%;
	}
	
	.threePic .ThreePicimg img {
		max-width: 100%;
		margin: 0 auto;
	}
</style>